<template>
  <div>
                  <ul>
                    <li v-for="m in messageList" :key="m.id">
                      <!--

                        路由传递参数支持两种
                        第一种query参数，可以直接在路径上写?后面，类似get请求的参数

                      -->
                      <!-- <router-link 
                      :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;
                     -->
                      <!--
                        to的对象写法
path:'/home/message/detail',
                      -->
                      <router-link :to="{
                        
                        name:'detailP',
                        query:{
                          id:m.id,
                          title:m.title
                        }
                      }">
                        {{m.title}}
                      </router-link>
                    </li>
                    
                  </ul>
                  <hr/>
                  <router-view></router-view>
                </div>
</template>

<script>
export default {
    name:'MessageComponent',
    data(){
      return {
        messageList:[
          {id:'001',title:'消息001'},
          {id:'002',title:'消息002'},
          {id:'003',title:'消息003'}
        ]
      }
    }
}
</script>
